<template>
  <div class="news">
    <div class="left" ref="sortable">
      <div :is="item.name" :id="index" :data="item.params" :class="{'active':index==activeIndex}" v-for="(item,index)  in list" @delete="deleteItem(index)" @config="config(item.name,index)">
      </div>
      <div :class="'col-'+value" v-for="(value,index) in test" @dblclick.prevent.stop="dbc" @click.prevent.stop="cof(index)"></div>
    </div>
    
    <div class="right">
      <div class="tab-list">
        <span :class="{active:controlShow}" @click="tabChange('control')">表单控件</span>
        <span :class="{active:!controlShow}" @click="tabChange('config')">控件修改</span>
      </div>
      <div class="control" v-show="controlShow">
        <div class="wrapper" id="test2" @click.stop.prevent="drop">
          <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
          <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
        </div>
        <el-checkbox-group class="wrapper" :max="0" v-model="checkedCities">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
        <el-input :readonly="true" class="wrapper" id="test" @click.native="drop2" placeholder="请输入内容">
          <template slot="prepend" class="txt"><span>功能字段</span><i>*</i></template>
        </el-input>
      </div>
      <div class="config" v-show="!controlShow">表单控件修改{{tem}}{{temParam}}</div>
    </div>
  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳']
import Radio from './Radio.vue'
import Inp from './Inp.vue'
import Sort from 'sortablejs'
export default {
  data() {
    return {
      msg: {
        message: '我是父组件的数据'
      },
      message: '这是新闻面',
      radio: '1',
      checkedCities: ['上海'],
      cities: cityOptions,
      list: [],
      controlShow: true,
      tem: '',
      temParam: null,
      activeIndex: 0,
      evt:null,
      originalEvent:null,
      test:[1,1,1,1],
      te:{a:1,b:2}
    }
  },
  components: {
    Radio,
    Inp
  },
  methods: {
    tabChange(tab) {
      tab == 'control' ? this.controlShow = true : this.controlShow = false
    },
    cof(index){
      console.log(index)
      var self = this;
      this.$set(self.test,index,3)
      this.test.splice(index+1,2)
      this.$delete(self.te,'a')
      console.log(this.test)
      console.log(this.te)
    },
    dbc(){
      console.log(69464)
    },
    drop2() {
      this.list.push({ name: 'Inp', params: { length: 80, width: 2 } })
    },
    drop() {
      this.list.push({ name: 'Radio', params: { length: 80, width: 1 } })
      console.log(this.activeIndex)
    },
    config(m, o) {
      this.controlShow = false;
      this.tem = m;
      this.activeIndex = o;
      console.log(this.list[o])
      this.list[o].params.width = 3;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
      if (index <= this.activeIndex) {
        this.activeIndex--;
        this.activeIndex < 0 && (this.activeIndex = 0);
      }
      if (this.list.length == 0) {
        this.activeIndex = 0;
      }
    }
  },
  mounted() {
    // $( "#sortable" ).sortable({
    //  revert: true,
    //  });
    // var el = document.getElementById('sortable');
    var self = this;
    new Sort(self.$refs.sortable, {
      sort: true,
      // disabled:true,
      ghostClass: 'ghostClass',
      fallbackClass: 'fallbackClass',
      onChoose: function( /**Event*/ evt) {
        console.log('onChoose') 
        console.log(evt.item.id) 
      },
      // Element dragging started
      onStart: function( /**Event*/ evt) {
        console.log('onStart') // element index within parent
      },
      // Element dragging ended
      onEnd: function( /**Event*/ evt) {
        console.log('onEnd')
        console.log(evt)
      },
      // Changed sorting within list
      onUpdate: function( /**Event*/ evt) {
        console.log('onUpdate')
      },
      // Called by any change to the list (add / update / remove)
      onSort: function( /**Event*/ evt) {
        console.log('onSort')
      },
      // Event when you move an item in the list or between lists
      onMove: function( /**Event*/ evt, /**Event*/ originalEvent) {
        console.log('onMove')
// console.log(evt)
//         console.log(originalEvent)
      },

      // Called when creating a clone of element
      onClone: function( /**Event*/ evt) {
        console.log('onClone')
      }
    });
  }
}

</script>
<style lang="less" scoped>
.news {
  width: 100%;
  height: 810px;
  position: relative;
  font-size: 0;
  border-radius: 10px;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  .left,
  .right {
    position: absolute;
    width: 70%;
    height: 810px;
    font-size: 20px;
    box-sizing: border-box;
    border: 1px solid #000;
    border-top: none;
    overflow-y: auto;
  }
  .left {
    left: 0;
    top: 0;
    // font-size: 0;
    .col-1{
      display: inline-block;
      width: 25%;
      box-sizing: border-box;
      border: 1px solid #000;
      height: 60px;
    }.col-2{
      display: inline-block;
      width: 50%;
      box-sizing: border-box;
      border: 1px solid #000;
      height: 60px;
    }.col-3{
      display: inline-block;
      width: 75%;
      box-sizing: border-box;
      border: 1px solid #000;
      height: 60px;
    }.col-4{
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #000;
      height: 60px;
    }
    .active {
      background: #e2e2e2;
    }
    .ghostClass {
      border: 1px solid red;
    }
    .fallbackClass {
      border: 1px solid green;
    }
  }
  .right {
    right: 0;
    top: 0;
    width: 30%;
    background: #fff;
    border-left: none;
    .tab-list {
      height: 40px;
      background: #e2e2e2;
      font-size: 0;
      span {
        display: inline-block;
        width: 30%;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        cursor: pointer; // background: red;
        &.active {
          // background: green;
          border-bottom: 2px solid orange;
        }
      }
    }
    .wrapper {
      box-sizing: border-box;
      width: 100%;
      padding: 20px 10%;
      color: red;
      border-bottom: 1px dashed #e2e2e2;
    }
  }
}

</style>
